<template>
  <div class="question">
    <div class="container">
      <h2 style="margin-top: 0;margin-bottom: 15px">{{question['question_title']}}</h2>
      <div class="question_detail">
        {{question['question_detail']}}
      </div>
      <el-button type="primary" size="medium" round
                 @click="writeAnswerClick"
      >
        写回答
      </el-button>
      <el-collapse-transition>
        <div v-show="showEditor">
          <div style="height: 15px;"></div>
          <div class="edit-part">
            <WangEditor ref="answerEditor" :height="300"></WangEditor>
            <el-button style="margin-top: 10px" type="primary" size="medium"
                       @click="postAnswerClick"
            >
              发布回答
            </el-button>
            <el-button style="margin-top: 10px" type="warning" size="medium"
                       @click="clearAnswerClick"
            >
              清空回答
            </el-button>
          </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>

  <div v-if="answerList.length !== 0" class="answers">
    <div class="title">
      所有回答
    </div>
    <div class="one_answer" v-for="answer in answerList" :key="answer.answer_id">
      <AnswerCard :answer="answer" @answer-edit="handleAnswerEdit"></AnswerCard>
    </div>
  </div>
  <div v-else class="no-answer">
    这个问题暂无回答，快写下你的回答吧~
  </div>

  <el-dialog @opened="editorDialogOpened" top="10vh" width="800px" v-model="showAnswerEditor" title="编辑回答">
    <WangEditor ref="dialogEditor" elem-id="newEditor"></WangEditor>
    <el-button @click="putAnswerClick" type="warning" size="medium" style="margin-top: 15px">
      确认编辑
    </el-button>
    <el-button @click="showAnswerEditor=false" type="danger" size="medium" style="margin-top: 15px">
      取消编辑
    </el-button>
  </el-dialog>
</template>

<script>
import {useRoute, useRouter} from 'vue-router'
import {ref} from 'vue'
import * as questionRequest from "@/network/question"
import AnswerCard from "@/components/AnswerCard";
import Comment from "@/components/Comment";
import WangEditor from "@/components/WangEditor";
import {postAnswer, putAnswer} from "@/network/answer";
import {currentLoginData, putLoginPrompt} from "@/assets/js/common";
import {ElMessage} from "element-plus";

export default {
  name: "QuestionAnswer",
  components: {WangEditor, Comment, AnswerCard},
  setup() {
    let route = useRoute();
    const question_id = route.params['question_id'];
    const question = ref({})
    questionRequest.getQuestion(question_id).then(res=> {
      question.value = res.data;
    })

    const answerList = ref([]);
    const updateAnswerList = () => {
      questionRequest.getQuestionAnswers(question_id).then(res=> {
        answerList.value = res.data;
      })
    }
    updateAnswerList();

    const answerEditor = ref(null);

    const showEditor = ref(false);
    const clearAnswerClick = ()=> {
      answerEditor.value.setContent("");
    }
    const postAnswerClick = ()=> {
      currentLoginData(loginData=> {
        // 先判断是否已登录
        if (loginData['isLogin']) {
          let content = answerEditor.value.getHtml().trim();
          if (content === "") {
            ElMessage.warning({
              message: "不能发布空回答哦~",
              duration: 1000
            });
            return;
          }
          postAnswer({
            user_id: loginData['user_id'],
            question_id: question_id,
            answer_content: content,
            answer_text: answerEditor.value.getTxt().trim()
          })
          .then(res=> {
            ElMessage.success({
              message: "回答发布成功！",
              duration: 1000
            })
            showEditor.value = false;
            // 更新一下回答列表
            updateAnswerList();
          })
        }
        else {
          console.log("当前用户未登录，无法回答问题")
        }
      })
    }

    const dialogEditor = ref(null);
    const showAnswerEditor = ref(false);
    let currentAnswerContent = "";
    let editAnswerId = null;
    const handleAnswerEdit = ({answerId, answerContent})=> {
      editAnswerId = answerId;
      currentAnswerContent = answerContent;
      if (dialogEditor.value) {
        dialogEditor.value.setContent(currentAnswerContent);
      }
      showAnswerEditor.value = true;
    }
    const editorDialogOpened = ()=> {
      dialogEditor.value.setContent(currentAnswerContent);
    }

    const putAnswerClick = ()=> {
      let putAnswerVal = dialogEditor.value.getHtml();
      if (putAnswerVal === currentAnswerContent) {
        ElMessage.warning({
          message: "修改前后没有变化，请先修改哦~",
          duration: 1000
        })
        return;
      }
      currentLoginData(loginData=> {
        // 这里不用再判断是否已登录了
        putAnswer(editAnswerId, {
          user_id: loginData['user_id'],
          answer_content: putAnswerVal,
          answer_text: dialogEditor.value.getTxt()
        })
        .then(res=> {
          ElMessage.success({
            message: "回答修改成功！",
            duration: 1000
          })
          showAnswerEditor.value = false;
          // 更新问题列表
          updateAnswerList();
        })
      })

    }

    const router = useRouter();
    const writeAnswerClick = ()=> {
      currentLoginData(loginData=> {
        if (loginData['isLogin']) {
          showEditor.value = !showEditor.value
        }
        else {
          putLoginPrompt(router, "编写回答");
        }
      })
    }

    return {
      answerEditor,
      question,
      answerList,
      showEditor,
      clearAnswerClick,
      postAnswerClick,
      handleAnswerEdit,
      showAnswerEditor,
      dialogEditor,
      editorDialogOpened,
      putAnswerClick,
      writeAnswerClick
    }
  }
}
</script>

<style scoped lang="scss">
@import "src/assets/scss/common";

h1 {
  margin: 0;
}

.question {
  //@include simple-shadow();
  .container {
    width: 80%;
    max-width: 700px;
    margin: 0 auto;
    padding: 15px 0;
    border-bottom: 1px solid #f1f3f4;
    .question_detail {
      margin: 10px 0;
      line-height: 1.8em;
      text-align: justify;
    }
  }
}

.answers {
  width: 80%;
  max-width: 700px;
  margin: 15px auto;
  .title {
    @include simple-shadow();
    text-align: center;
    font-size: 24px;
    line-height: 2em;
    background: linear-gradient(283.8deg, rgb(8, 124, 250) 5.73%, rgb(33, 215, 137) 100%);
    color: white;
    margin-bottom: 15px;
  }
  .one_answer {
    @include simple-shadow();
    border-radius: $main-radius;
    margin-bottom: 15px;
  }
}
.no-answer {
  width: 80%;
  max-width: 700px;
  margin: 15px auto;

  font-size: 18px;
  color: #505052;
}
</style>
